<style scoped>
  .list {
    background: #eee;
    /*padding-bottom: 150px;*/
    overflow: auto;
  }
  .weui-form-preview {
    background-color: #fff;
    margin: 5px;
    border-radius: 5px;
  }
  .weui-form-preview__hd label, .weui-form-preview__hd em {
    font-size: .9em !important;
  }
  .rj-cell {
    display: inline-block;
    font-size: 0;
    padding: 5px 15px;
  }
  .rj-cell.max span{
    font-size: 16px;
    padding-right: 20px;
  }
  .rj-cell label {
    color: #333;
    font-size: 14px;
  }
  .rj-cell span {
    padding-left: 5px;
    font-size: 14px;
    color: #333;
  }
  .weui-cells {
    border-radius: 5px;
    margin-top: 0;
  }
  .rj-wrap {
    background: #eee;
    overflow:auto;overflow-x: hidden
  }
  .rj-cont {
    background: #fff;
  }
  .rj-cell span i {
    color: red;
    font-size: 30px;
    font-style: normal;
  }
  .paylayer .rj-cell {
    padding: 5px;
  }
  .weui-panel {
    background: #eee;
  }
  .rj-cont-tit {
    margin: 0;
    border-radius: 0;
    text-align: left;
  }
  .weui-panel {
    margin-top: 0;
  }
  .all-btn {
    position: absolute;
    right: 8px;
    bottom: 0;
  }
  .all-btn i {
    font-size: 16px;
    position: absolute;
    left: -7px;
    top: 8px;
  }
  .weui-cells {
    text-align: left;
  }
  .noborder {
    border: 0;
  }
  .itemstit {
    text-align: left;
    padding: 10px 15px;
    font-size: 14px;
    padding-bottom: 5px;
    color: #aaa;
  }
  .weui-cell:before {
    border-top: 0;
  }
  .weui-select {
    font-size: 14px;
    color: #333;
  }
  .weui-cell__hd {
    font-size: 14px;
    color: #333;
    padding: 5px 15px;
  }
  .weui-textarea {
    font-size: 14px;
  }
  .midbox {
    /*border-top: 1px solid #eee;*/
    /*border-bottom: 1px solid #eee;*/
    padding: 0;
  }
  .weui-uploader_file.inrow {
    margin: 0;
    width: 30px;
  }
</style>
<template>
  <div class="comon">
    <div class="rj-wrap">
      运费结算确认
      <a href="javascript:;" @click="$router.back(-1)" style="position: absolute; left: 10px; top: 8px">
        <img src="@/assets/back.png" style="width: 20px">
      </a>
    </div>
    <div class="weui-panel weui-panel_access">
      <div class="weui-panel__bd">
        <div class="weui-form-preview billitem rj-cont-tit" style="position: relative;">
          <form action="" method="post" id="formid">
            <input type="hidden" name="entity.guid" :value="id" />
            <input v-if="baseInfo.transtype == 3" type="hidden" name="entity.farepricetype" value="1" />
            <div class="rj-cell max">
              <label>编号：</label>
              <span>{{baseInfo.code}}</span>
              <span>{{baseInfo.typename}}</span>
            </div>
<!--            <div class="rj-cell max">-->
<!--              <label>订单类型：</label>-->
<!--            </div>-->
            <div class="rj-cell max lastitem" style="display: block;">
              <label>物流公司：</label>
              <span>{{baseInfo.customername}}</span>
            </div>
<!--            <div class="rj-cell max">-->
<!--              <label>计价方式：</label>-->
<!--              <span>{{baseInfo.farepriTypeName}}</span>-->
<!--            </div>-->
            <div class="weui-cell weui-cell_select" v-if="baseInfo.transtype != 3">
              <div class="weui-cell__hd"><label class="weui-label">计价方式：</label></div>
              <div class="weui-cell__bd" style="display: inline-block;z-index: 0;">
                <select name="entity.farepricetype" class="weui-select" v-model="fpricetype">
                  <option value="" disabled>请选择</option>
                  <option selected="" v-for="(item, index) in fpricetypes" :value="item.dictkey">{{item.dicttext}}</option>
                </select>
              </div>
            </div>
            <div class="rj-cell max">
              <label>单价：</label>
              <input class="noborder" style="padding: 5px 10px;" type="number" name="entity.fareprice" v-model="fareprice" placeholder="请输入单价" />
            </div>
            <div class="rj-cell max" v-show="baseInfo.faretype == 1">
              <label>结算方式：</label>
              <span>{{baseInfo.faretypeName}}</span>
            </div>
            <div class="weui-cell weui-cell_select" style="display: block;" v-if="baseInfo.faretype != 1">
              <div class="weui-cell__hd"><label class="weui-label">结算方式：</label></div>
              <div class="weui-cell__bd" style="display: inline-block;">
                <select name="entity.faretype" class="weui-select">
                  <option selected="" v-for="(item, index) in faretypes" :value="item.dictkey">{{item.dicttext}}</option>
                </select>
              </div>
            </div>
            <div class="rj-cell max" v-if="totalLoadWeight != 0">
              <label>发货重量：</label>
              <span>{{totalLoadWeight}}</span>
            </div>
            <div class="rj-cell max" v-if="totalUnloadWeight != 0">
              <label>到货重量：</label>
              <span>{{totalUnloadWeight}}</span>
            </div>
            <div class="weui-cell midbox">
              <div class="weui-cell__hd"><label class="weui-label">结算重量：</label></div>
              <div class="weui-cell__bd">
                <input class="noborder inlinput1" style="padding: 5px 10px;" type="number" name="entity.fareweight" v-model="fareweight" placeholder="请输入结算重量" />
                <input class="weui-input inlinput2" type="text" readonly value="吨">
              </div>
              <ul class="weui_uploader_files uploaderFiles" v-if="imgs.length > 0" id="images2" style="font-size: 0; margin-left: 5px;">
                <li class="weui-uploader_file inrow exp" v-for="(image, index) in imgs" :key="image.guid" ><img class="attachimg" onerror="javascript:this.src='../../../static/image/default.png';this.onerror = null" :src="image.url + '-suolue.png'" :data-img="image.url + '.png'" width="22"/></li>
              </ul>
            </div>
            <div class="rj-cell max" style="display: block;">
              <label>其他费用(元)：</label>
              <input class="noborder" style="padding: 5px 10px;" type="number" v-model="othercost" name="entity.othercost" placeholder="请输入其他费用" />
            </div>
            <div class="weui-cell">
              <div class="weui-cell__bd">
                <textarea class="weui-textarea" name="entity.otherremark" v-model="otherremark" placeholder="请输入其他费用说明" rows="3"></textarea>
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="list" id="list">
          <p class="itemstit">订单明细</p>
          <div class="weui-form-preview" v-for="(item, index) in orders" :key="item.guid">
            <div class="weui-cells weui-cells_checkbox">
              <div class="weui-cell">
                <div class="weui-cell__bd weui-cell_primary payitem" data-guid="">
                  <p> </p>
                  <div class="rj-cell max">
                    <label>销售单号：</label>
                    <span>{{item.code}}</span>
<!--                    <label>结算金额(元)：</label>-->
<!--                    <span>{{getFinalAmount(item.loadweight, item.unloadweight)}}</span>-->
                  </div>
                  <div class="rj-cell max">

                  </div>
                  <div class="rj-cell max">
                    <label>发货重量：</label>
                    <span>{{item.lbweight ? `${item.lbweight} 吨` : ''}}</span>
                    <label>到货重量：</label>
                    <span>{{item.unloadweight ? `${item.unloadweight} 吨` : ''}}</span>
                  </div>
                  <p></p>
                </div>
              </div>
            </div>
      </div>
    </div>
    <div class="paylayer">
      <div class="rj-cell">
        <label>合计：</label>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="carnum"><i>{{total}}</i> 单</span>
      </div>
      <div class="rj-cell">
        <label></label>
        <span id="amount"><i>{{totalAmount}}</i> 元</span>
      </div>
      <div class="weui-form-preview__ft" style="border-bottom: .5px solid #e5e5e5;">
        <a class="weui-form-preview__btn weui-form-preview__btn_primary subbtn" @click="send" href="javascript:">确认</a>
        <a class="weui-form-preview__btn weui-form-preview__btn_default" @click="$router.back(-1)">返回</a>
      </div>
    </div>
    <OperationLogs2 :nodeid="nodeid" :orderid="id" :srguid="''" :departid="baseInfo.departid"></OperationLogs2>
  </div>
</template>
<script type="text/babel">
  import OperationLogs2 from '../common/OperationLogs2'

  export default {
    name: 'ConfirmPassport',
    data () {
      return {
        id: '',
        nodeid: '',
        annex: '',
        baseInfo: {},
        orders: [],
        opinion: '',
        faretypes: [], //物流结算方式（公司结算、客户结算）
        totalLoadWeight: 0,
        totalUnloadWeight: 0,
        totalWeight: 0,
        total: 0,
        totalAmount: 0,
        fareweight: '',
        othercost: '',
        otherremark: '',
        fpricetypes: [], //运费计价方式（按车、按吨）
        fpricetype: '',
        fareprice: '',
        imgs: []
      }
    },
    components: {
      OperationLogs2
    },
    created() {
    },
    mounted() {
      this.id = this.$route.query.guid;
      this.nodeid = this.$route.query.nodeid;
      this.annex = this.$route.query.annex;
      this.getBaseInfo();
      this.getFaretypes();
      this.getFpricetype();

      $('.weui-panel').on('click', '.uploaderFiles .attachimg', function () {
        var num = $(this).parent().children().not( ".exp" ).length;
        var imgArr = [];
        for (var i=0; i<num; i++) {
          imgArr.push($(this).parent().find('.attachimg').eq(i).data('img'));
        }
        var pnum = $(this).parent().find('.exp').length;
        var index = pnum > 0 ? $(this).index() - pnum : $(this).index();
        var pb = $.photoBrowser({
          items: imgArr,
          initIndex: index
        });
        pb.open();
      });
    },
    watch: {
      'fareweight': function () {
        this.getFinalAmount();
      },
      'fpricetype': function (val) {
        this.getFinalAmount();
      },
      'fareprice': function (val) {
        this.getFinalAmount();
      },
      // 'fareweight': function (val) {
      //   this.totalWeight = val == 1 ? this.totalLoadWeight : this.totalUnloadWeight;
      //   this.getFinalAmount();
      // },
      'othercost': function (val) {
        this.getFinalAmount();
      },
      // 'totalUnloadWeight': function (val) {
      //   this.fareweight = val == 0 ? 1 : 2;
      // }
    },
    methods: {
      getBaseInfo: function() {
        let that = this;
        this.axios({
          method: 'get',
          url: '/wlinfo/Wlinfo!getFreightinfo.action',
          params: {wlinfoid: this.id}
        }).then((response) => {
          if (response.data.msg == 'success') {
            this.baseInfo = response.data.wlinfo;
            this.orders = response.data.wlorderInfos;
            this.imgs = response.data.imgs;
            this.fpricetype = this.baseInfo.farepricetype;
            this.fareprice = this.baseInfo.fareprice != '' ? this.baseInfo.fareprice : 0;
            this.total = this.orders.length;
            this.orders.filter(function (item) {
              that.totalLoadWeight += item.loadweight;
              that.totalUnloadWeight += item.unloadweight;
            });
            //合计
            this.$nextTick(function () {
              this.getFinalAmount();
            })
          } else {
            this.toastError("系统错误");
          }

        })
      },
      getFpricetype: function() {
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Sellform!findDict.action',
          params: {type: 94}
        }).then(response => {
          if (response.statusText == "OK") {
            that.fpricetypes = response.data;
            //that.fpricetype == response.data[0].dictkey;
          } else {
            this.toastText('获取运费计价方式数据失败');
          }
        });
      },
      //物流结算
      getFaretypes: function() {
        let that = this;
        this.axios({
          method: 'get',
          responseType: 'json',
          url: '/sales/Sellform!findDict.action',
          params: {type: 19}
        }).then(response => {
          if (response.statusText == "OK") {
            that.faretypes = response.data;
          } else {
            this.toastText('获取物流结算方式数据失败');
          }
        });
      },
      send: function () {
        let that = this;

        if (this.fpricetype == 2 && this.fareweight == '') {
          this.toastText('结算重量不能为空！')
          return false;
        } else if (this.othercost != '' && this.otherremark == '') {
          this.toastText('其他费用说明不能为空！')
          return false;
        }

        //防止重复提交
        $('.subbtn').attr("disabled",true).css("pointer-events","none");
        //显示提交状态
        $.showLoading("正在提交");

        let postData =  this.serialize2Obj($("#formid").serializeArray());
        postData.nodeid = this.nodeid;
        //postData['entity.fareweight'] = this.totalWeight;

        this.axios({
          method: 'post',
          url: '/wlinfo/Wlinfo!confirmFreight.action',
          params: postData
        }).then((response) => {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();

          if (response.data.msg == 'success') {
            this.toastSuccess('操作成功');
            this.$router.push({name: 'Wlinfo'});
          } else if (response.data.msg == 'canotopt') {
            this.toastText('不允许的操作');
          }else {
            this.toastError("系统错误");
          }

        }).catch(function (error) {
          //恢复提交按钮可点击
          $('.subbtn').attr('disabled', false).css("pointer-events","auto");
          //关闭提交状态
          $.hideLoading();
          that.toastError('系统错误');
        });
      },
      getFinalAmount: function () {
        let totalAmount = 0;
        let othercost = this.othercost != '' ?  parseFloat(this.othercost) : 0;
        if (this.fpricetype == 1) {
          totalAmount = this.toFix2(parseFloat(this.fareprice) + othercost);
        } else {
          let finalWeight = this.fareweight;
          totalAmount = this.toFix2(this.fareprice * finalWeight + othercost);
        }
        this.totalAmount = totalAmount;
      },
      openLogs: function() {
        this.$router.push({name: 'OperationLogs2', query: {orderid: this.id, srguid: '', departid: ''}});
      }
    }
  };
</script>
